<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.UserName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.Pwd" show-password></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.Name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.Tel"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.Email"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox-group v-model="CheckRole">
          <el-checkbox
            v-for="city in RoleList"
            :label="city.Id"
            :key="city.Id"
            >{{ city.Name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <!-- 扩展字段显示 -->
    <h3>扩展字段</h3>
    <table>
      <tr v-for="(x, index) in NewField" :key="index">
        <td>{{ x }}</td>
        <td>
          <el-input
            style="width: 380px"
            v-model="NewFieldVlaue[index]"
          ></el-input>
        </td>
      </tr>
    </table>
    <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button>取消</el-button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      NewField:[],
      NewFieldVlaue:[],
      form: {},
      CheckRole: [],
      RoleList: [],
    };
  },
  created() {
    this.GetRole();
    this.GetNewField();
  },
methods:{
  onSubmit() {
      if (this.CheckRole.length == 0) {
        this.$message.Success("至少选择一个角色");
        return;
      }
      this.form.RoleIds = this.CheckRole.toString();
      this.form.NewField = this.NewField;
      this.form.NewFieldVlaue = this.NewFieldVlaue;
      this.axios
        .post(
          "http://localhost:5255/api/User/AddUserInfoAndExtendId",
          this.form
        )
        .then((res) => {
          if (res.data.Success) {
            this.$message.success(res.data.ErrorInfo);
            this.$emit("CloseDia");
          } else {
            this.$message.error(res.data.ErrorInfo);
          }
        });
    },
    GetRole() {
      this.axios.get("http://localhost:5255/api/Role/GetRole").then((res) => {
        this.RoleList = res.data.Data;
      });
    },
    //查询新增字段
    GetNewField() {
      this.axios
        .get("http://localhost:5255/api/User/GetExtendById")
        .then((res) => {
          res.data.Data.forEach((res) => {
            const values = [];
            for (let key in res) {
              values.push(res[key]);
            }
            this.NewField.push(values[2]);
          });
        });
    },
  },

};
</script>

<style>
</style>